<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今天吃什么？</title>
    <style>
        * {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .box .cho {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-evenly;
        }

        .box .cho>button {
            width: 75px;
            height: 40px;
            border-radius: 20px;
        }

        p {
            font-size: 40px;
            font-style: oblique;
            color: #000;
            font-weight: bolder;
            display: inline-block;
            text-align: center;
            width: 100%;
            height: 20px;
            padding: 10px 0px 10px 0px;
            margin-bottom: 40px;
        }

        span {
            width: 100%;
            height: 20px;
            display: inline-block;
            text-align: center;
            padding: 10px 0px 10px 0px;
        }

        button#pickButton {
            background-color: orange;
            font-weight: bolder;
            color: white;
            width: 150px;
            height: 40px;
            border-radius: 20px;
            padding: 10px 0px 10px 0px;
            position: absolute;
            top: 90%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="title">今天吃什么？</p>
        <div class="cho">
            <button class="active">饭堂</button>
            <button>过桥</button>
        </div>
        <span class="select">我该吃什么呢？</span>
        <button id="pickButton">帮我选</button>
    </div>

    <script>

        // 获取所有按钮和选项元素
        const buttons = document.querySelectorAll('.cho button');
        const selectSpan = document.querySelector('.select');

        // 定义抽签数组
        const choices = {
            '饭堂': ['小碗菜', '猪脚饭', '鸡公煲', '螺狮粉', '鸡公煲', '杀猪粉', '把子肉', '自选菜'],
            '过桥': ['渔粉', '沙县', '烤鱼', '自选菜（快餐）1', '自选菜（快餐）2', '自选菜（快餐）3', '热干面', '汤饭', '砂锅']
        };

        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        // 给按钮添加点击事件监听器
        buttons.forEach(button => {
            button.addEventListener('click', debounce(() => {
                // 切换高亮状态
                buttons.forEach(btn => {
                    btn.classList.remove('active');
                    btn.style.backgroundColor = ''; // 清除背景颜色
                    btn.style.color = ''; // 清除字体颜色
                });
                button.classList.add('active');
                button.style.backgroundColor = 'pink'; // 设置背景颜色为粉色
                button.style.color = 'white'; // 设置字体颜色为白色
            }, 300)); // 设置防抖时间为 300 毫秒
        });

        // 获取抽签按钮
        const pickButton = document.getElementById('pickButton');

        // 添加抽签按钮点击事件监听器
        pickButton.addEventListener('click', debounce(() => {
            // 获取当前高亮按钮
            const activeButton = document.querySelector('.cho .active');
            const currentChoice = choices[activeButton.textContent];

            // 滚动抽签30次，每次间隔 100 毫秒
            let count = 0;
            const interval = setInterval(() => {
                selectSpan.textContent = `今天吃 ${currentChoice[Math.floor(Math.random() * currentChoice.length)]} `;
                count++;
                if (count === 30) {
                    clearInterval(interval);
                    // 改变样式
                    selectSpan.style.color = 'red'; // 举例：改变颜色为红色
                }
            }, 100);
        }, 300)); // 设置防抖时间为 300 毫秒

    </script>
</body>

</html>